<template>
  <div>
    <div class="section-context">
      <el-form label-width="80px">
        <div style="width: 95%;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="租户名称">
                <el-input v-model="gvKubeTenantData.tenantName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租户描述">
                <el-input v-model="gvKubeTenantData.tenantDescription" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="width: 95%;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属集群">
                <el-input v-model="gvKubeTenantData.clusterZhname" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="集群地址">
                <el-input v-model="gvKubeCluster.clusterUrl" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="width: 95%;">
          <el-row>
            <el-col :span="12">
              <el-form-item label="CPU限制">
                <el-input v-model="gvKubeTenantData.tenantCpu" :disabled="true">
                  <template slot="append">核</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内存限制">
                <el-input v-model="gvKubeTenantData.tenantMem/1024" :disabled="true">
                  <template slot="append">GB</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div>
      <div class="section-title">租户关联用户信息</div>
      <div class="section-context">
        <el-table :data="gvKubeUserData" style="width: 95%">
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="roleType" label="角色" width="170">
            <template slot-scope="scope">
              {{ getRoleTypeName(scope.row.roleType) }}
            </template>
          </el-table-column>
          <el-table-column prop="userStatus" label="状态" width="170">
            <template slot-scope="scope">
              {{ getStatusName(scope.row.userStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "ShowTenantInfoDialog",
    props: {
      tenantId: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        gvKubeTenantData: {},
        gvKubeUserData: [],
        gvKubeCluster: {},
        roleTypeMap: {}
      }
    },
    methods: {
      getTenantInfo() {
        this.$tenantManageApi.editTenant(this.tenantId).then(res => {
          if (res && res.code === 200) {
            this.gvKubeCluster = res.data.gvKubeCluster
            this.gvKubeTenantData = res.data.tenantVo
            this.gvKubeUserData = res.data.gvKubeUserList
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getRoleTypeName(roleType) {
        //scope.row.roleType 表示当前行的 roleType 属性的值
        return this.roleTypeMap[roleType] || '未知角色';
      },
      getStatusName(userStatus) {
        // 0是启用，1是禁用
        const statusMap = {
          0: '启用',
          1: '禁用'
        }
        return statusMap[userStatus] || '未知状态'
      },
      //获取用户角色信息
      fetchRoleData() {
        this.$userManageApi.getAllRole().then(res => {
          if (res && res.code === 200) {
            //使用数组的reduce方法来从数组对象中提取值并创建一个新的映射对象
            // 使用reduce方法提取id和name，构建roleTypeMap对象
            this.roleTypeMap = res.data.reduce((accumulator, role) => {
              // 将role对象的id作为属性，name作为值，添加到累加器对象中
              accumulator[role.id] = role.name;
              return accumulator;
            }, {}); // 初始化累加器为空对象
            // 输出结果
            //console.log(this.roleTypeMap);
          }
        }).catch(err => {
          console.log(err)
        })
      },
    },
    beforeMount() {
      this.getTenantInfo();
      this.fetchRoleData();
    },
    // destroyed() {
    //   console.log(222);
    // },
  }
</script>

<style scoped>

  .section-title {
    font-size: 1.3em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
  }
</style>
